import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import * as VueRouter from 'vue-router'
import Home from './Home.vue'
import CodeTemplate from './Code_Template.vue'
import * as store from './store'
import * as  ImageItem from './image_item'
import * as webVsCode from './web_vscode'
import sicon from "./components/sicon/sicon.vue";

store.imagesMapStore.value = (webVsCode.vscode.getState() || { imageList: [] }).imageList;

window.addEventListener('message', (e) => {
    console.log(e);
    if (e.data.type == "addImagesDir") {

        let newImageDir = new ImageItem.ImageDir(e.data.data.dirPath, e.data.data.dirBaseName)

        let imageList = store.imagesMapStore.value;

        let newDirList: ImageItem.ImageDir[] = [];
        imageList.forEach((item) => {
            console.log(item.dirPath, e.data.data.dirPath);
            if (item.dirPath != e.data.data.dirPath) {
                newDirList.push(item);
            } else {
                newImageDir.expand = item.expand;
            }
        })

        let newImageList: ImageItem.ImageFile[] = []
        for (let index = 0; index < e.data.data.chidler.length; index++) {
            const item = e.data.data.chidler[index];
            newImageList.push(new ImageItem.ImageFile(item.basename, item.imagePath, item.imageVsCodePath))
        }

        newImageDir.chidler = newImageList;
        newDirList.push(newImageDir)
        store.imagesMapStore.value = newDirList;
        webVsCode.vscode.setState({ imageList: newDirList });
    } else if (e.data.type == "updateAll") {

        let dirList: ImageItem.ImageDir[] = []
        for (let dirIndex = 0; dirIndex < e.data.data.length; dirIndex++) {
            const dirItem = e.data.data[dirIndex];

            console.log(dirItem);

            let imageList: ImageItem.ImageFile[] = []
            for (let index = 0; index < dirItem.chidler.length; index++) {
                const item = dirItem.chidler[index];
                imageList.push(new ImageItem.ImageFile(item.basename, item.imagePath, item.imageVsCodePath))
            }

            let newImageDir = new ImageItem.ImageDir(dirItem.dirPath, dirItem.dirBaseName)
            newImageDir.chidler = imageList;

            store.imagesMapStore.value.forEach((item) => {
                if (dirItem.dirPath == item.dirPath) {
                    newImageDir.expand = item.expand;
                }
            })

            dirList.push()
        }
        store.imagesMapStore.value = dirList;
        webVsCode.vscode.setState({ imageList: dirList });


    } else if (e.data.type == "allDel") {
        store.imagesMapStore.value = [];
        webVsCode.vscode.setState({ imageList: [] });
    } else if (e.data.type == "refresh") {
        webVsCode.vscode.postMessage({
            type: "refresh",
            data: JSON.stringify(store.imagesMapStore.value)
        });
    }
});


const routes = [
    { path: '/', component: Home },
    { path: '/codeTemplate', component: Home },
]

const router = VueRouter.createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: VueRouter.createWebHashHistory(),
    routes, // `routes: routes` 的缩写
})

const app = createApp(App)
app.use(router)
    .component("sicon", sicon)
app.mount('#app')
